<template>
  <div class="full-page">
    <div id="map-container"></div>
    <controlor @handleOutput="handleOutput" @updateMap="updateMap"></controlor>
  </div>
</template>
<script>
import axios from 'axios';
import Controlor from './Controlor';
import { mapGetters } from 'vuex';
const echarts = require('echarts');

export default {
  components: {Controlor},
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'mapOption'
    ])
  },
  mounted() {
    this.registerChinaMap().then(res => {
      this.drawMap();
    });
  },
  methods: {
    // 注册中国地图
    registerChinaMap() {
      return axios.get('./static/china.json').then(response => {
        let chinaJson = response.data;
        echarts.registerMap('china', chinaJson);
        return true;
      })
      .catch(error => {
        console.log('装载地图数据出错：', error);
      });
    },
    // 画中国地图
    drawMap() {
      this.mapChart = echarts.init(document.getElementById('map-container'));
      this.updateMap();
    },
    // 更新渲染地图
    updateMap() {
      //使用制定的配置项和数据显示图表
      if (this.mapChart) { // 地图还未完成加载
        this.mapChart.setOption(this.mapOption);
      }
    },
    // 导出图片
    handleOutput() {
      let mapCanvas = document.querySelector('#map-container canvas');
      let imgURL = mapCanvas.toDataURL("image/jpeg", 0.1);
      // let imgURL = mapCanvas.toDataURL("image/webp");
      console.log('导出imgURL===', imgURL) 
      // window.open(imgURL, '_blank');
      let virtualBtn = document.createElement('a');
      virtualBtn.href = imgURL;
      virtualBtn.download = '';
      virtualBtn.click();
      virtualBtn = null;
    }
  }
}
</script>
<style>
.full-page {
  height: 100%;
}
#map-container {
  width: 100%;
  height: 100%;
  /* width: 6000px;
  height: 4000px; */
}
/* #map-container canvas {
  transform: scale(0.25)
} */
#control-area {
  text-align: left;
}
</style>